<template>
  <div id="the1">
    <div class="md-header-fixed">
      <header class="md-header">
        <div class="logo"><img src="../assets/images/logo.png"></div>

        <div class="search" id="logoHeadSearch">
          <router-link to="/search" class="url1">我的猫咖</router-link>
          <router-link to="/search" class="url2">我的猫咖</router-link>
        </div>
        <div class="login" id="user_login">
          <div class="before">
            <router-link to="/user" class="user"></router-link>
          </div>

        </div>
      </header>
      <nav class="md-nav">
        <div class="md-nav11 cf">
          <router-link to="/home">推荐</router-link>
          <router-link to="/new" class="cur">最新</router-link>
          <router-link to="/rank">排行</router-link>
          <router-link to="/class">找游戏</router-link>
        </div>


      </nav>
    </div>
    <div class="bannerbox">
      <div class="swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" @change="onChange">

          <van-swipe-item>
            <img src="https://imga1.4399.cn/upload_pic/2022/11/1/4399_09103014718.gif" alt=""
              style="width: 100%;display: block;height: 100%;">
          </van-swipe-item>




        </van-swipe>
      </div>

    </div>
    <div class="md-gamebox5 cf">
      <ul class="cf" id="top_gameids">
        <li v-for=" (item, index) in this.bad " :key="'ifo-' + index">
          <router-link :to="'./GameDetails?id=' + item.id">

            <img :src="item.pic"><i class="icon-new"></i>
          </router-link>
          <em>{{ item.title }}</em>
        </li>

      </ul>
    </div>

    <van-list v-model="loading" :finished="finished" finished-text="没有更多游戏了" @load="onLoad">
      <div class="md-list">
        <div id="list_box">
          <van-cell class="list-div" v-for=" (k, index) in this.con " :key="'i-fo-' + index">
            <p class="list-head" id="timeId-0">{{ k.date1 }}</p>


            <ul>
              <li v-for=" (item, index) in k.data " :key="'ifo-' + index">
                <router-link :to="'./GameDetails?id=' + item.id">


                  <img :src="item.pic"><em>{{ item.title }}</em>

                  <p>{{ item.html5introduce }}</p><span>{{ item.category }} | 人气:{{ item.wapclicks
                  }}</span><i class="icon-"></i>
                </router-link>
                <router-link :to="'/start?id=' + item.id" tag="a" class="btn">开始玩</router-link>

              </li>

            </ul>
          </van-cell>

        </div>
      </div>




    </van-list>
  </div>
</template>

<script>
import { getBanner, getHomepageBall } from '@/api/home';
// import { Sticky } from 'vant';
export default {
  data() {
    return {
      phone: '',
      password: '',
      code: '',
      indexSwiper: 0,
      container: null,
      con: null,
      coco: null,
      bad: null,
      list: [],
      loading: false,
      finished: false,

      count: 1,
      scrollTop: "",//距离顶部的距离
      scrollHeight: "",//总共的高
      offsetHeight: "",//当前页面的高

    };
  },
  methods: {

    onChange(index) {
      this.indexSwiper = index;
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      //当前高度
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //总高度
      this.scrollHeight = document.body.scrollHeight;
      //当前屏幕高度
      this.offsetHeight = document.body.offsetHeight;

      if (this.scrollTop + this.offsetHeight + 500 >= this.scrollHeight) {
        setTimeout(() => {
          for (let i = 0; i < 1; i++) {
            this.con = this.list.slice(0, this.count++)
            console.log("con=", this.con);
          }


          // 加载状态结束
          this.loading = false;

          // 数据全部加载完成
          if (this.con.length >= this.list.length) {
            this.finished = true;
          }
        }, 1000);
      }
    }
  },
  mounted() {
    getBanner().then(data => {
      console.log(data);
      this.list = data





    });
    getHomepageBall().then(data => {
      console.log(data);
      this.container = data
      this.bad = this.container.data
      this.coco = this.container.date1
      console.log("container=", this.container);
      console.log("coco=", this.coco);


    });
  }

}
</script>

<style lang="scss" scoped>
.md-nav11 {
  margin: 0 auto;
}

.md-list ul {
  margin: 10px;
}

.icon-hot,
.icon-new,
.icon-sf,
.icon-xf,
.icon-hd,
.icon-sd,
.icon-bsd {
  display: block;
  position: absolute;
  top: -2.5px;
  left: -3px;
  width: 33px;
  height: 33px;
}

.cf:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
}


.md-gamebox5 ul {
  display: flex;
  flex-wrap: wrap;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  // justify-content: space-around;

}

ol,
ul,
li {
  list-style: none;
}

body,
html,
a,
img,
div,
form,
select,
input,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
dd,
dl,
dt,
p,
label,
em,
span,
cude,
i {
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: middle;
}

.md-gamebox5 {
  margin: 0 10px 15px;
}

.md-gamebox5 li {
  width: 62px;
  margin-bottom: 15px;
  text-align: left;
  float: left;
  margin-right: 35.5px;
}

@media screen and (min-width: 768px) {
  .md-gamebox5 li {
    width: 25%;
    text-align: center;
    margin-bottom: .2rem;
    margin-right: 0;
  }
}

.md-gamebox5 li a {
  position: relative;
  width: 62px;
  display: block;
  margin: 0 auto;
}

.md-gamebox5 li a img {
  width: 62px;
  height: 62px;
  display: block;
  border-radius: .16rem;
}


.icon-new {
  background: url("https://h.4399.com/images/2022/icon.png") no-repeat;
  background-size: 50px 1400px;
  background-position: 0 -654px;

}

img,
input {
  border: none;
  outline: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.md-gamebox5 li:nth-child(4n) {
  margin-right: 0;
}


.md-list li span {
  height: 18px;
  line-height: 18px;
  color: #959595;
  font-size: 11px;
}

.md-list li p {
  height: 16px;
  line-height: 16px;
  padding-right: 75px;
  color: #959595;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-list li .btn {
  position: absolute;
  top: 13.5px;
  right: 0;
  width: 64px;
  height: 12px;
  line-height: 12px;
  padding: 8px 0;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #00cc7d;
  color: #00cc7d;
}

.md-list li em,
.md-list li span,
.md-list li p {
  display: block;
  margin-left: 65px;
}

.md-list li em {
  display: inline-block;
  margin-left: 10px;
  height: 18px;
  line-height: 18px;
  font-size: 14px;
  padding-right: 75px;
  margin-bottom: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



em,
i {
  font-style: normal;
  vertical-align: top;
}

.md-list li {
  position: relative;
  margin: 3px 0 15px;
  background: #fff;
  height: 55px;

  margin-bottom: 17px;
}

.list-head {
  padding: 5px 10px;
  margin-bottom: 0;
  background-color: #f5f5f5 !important;
  margin-bottom: 15px;
  height: 19px;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 15px;

}

.md-list li a:first-child {
  height: 55px;
}

.md-list li a {
  display: block;
  position: relative;
}

.md-list li img {
  float: left;
  width: 55px;
  height: 55px;
  border-radius: 12px;
}


.bannerbox {
  background-image: linear-gradient(#E9ECEC, #ffffff);
  height-min: 137px;
  border-radius: 10px;
  margin: 0 10px;
  margin-bottom: 30px !important;

  .swiper {
    border-radius: 10px;

    // margin-top: 50px;
    background-color: aqua;

    overflow: hidden;

    .custom-indicator {
      width: 100%;
      position: absolute;
      left: 0px;
      bottom: 18px;
      text-align: center;

      ul {

        display: inline-block;
        margin: 0 auto;

        li {
          border-radius: 10px;
          display: inline-block;
          width: 7px;
          height: 7px;
          margin: 0px 5px;
          background-color: rgba(255, 255, 255, 0.6);

          &.con {
            background-color: #ff6600;
          }
        }
      }
    }
  }
}

.van-sticky--fixed {
  position: fixed;
  top: 80px;
  right: 0;
  left: 0;
  z-index: 99;
}

.md-header .search .url2,
.md-header .login a,
.md-feedback a,
.md-comment .comment-title p a,
.md-comment .comment-title .comment-url,
.comment-box .ft p i,
.md-search .txt,
.md-fixed p,
.md-fixed i,
.icon-hot,

.icon-sf,
.icon-xf,
.icon-hd,
.icon-sd,
.icon-bsd {
  background: url("https://h.4399.com/images/2022/icon.png") no-repeat;
  background-size: 50px 1400px;
}

a {
  color: #333;
  text-decoration: none;
  outline: none;
}

ol,
ul,
li {
  list-style: none;
}

body,
html,
a,
img,
div,
form,
select,
input,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
dd,
dl,
dt,
p,
label,
em,
span,
cude,
i {
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: middle;
}

body {
  font-size: 12px;
  color: #333;
  background-color: #ffffff;
  min-width: 375px;
  margin: 0 auto;
}


.md-header-fixed {
  height: 100px;
  position: relative;
  overflow: hidden;
}

.md-header {

  max-width: 500px;
  min-width: 375px;
  margin: 0 auto;
  position: fixed;
  top: 0;
  width: 100%;
  height: 30px;
  padding: 10px 0;
  background-color: #fff;
  overflow: hidden;
  z-index: 99;

  .logo {
    float: left;
    padding: 3.5px 0 3.5px 12px;

    img {
      height: 22px;
      display: block;
    }
  }

  .search {
    margin: 0 56px 0 142px;
    position: relative;

    .url1 {
      display: block;
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding-left: 14px;
      background-color: #f3f3f3;
      background-position: right -35px;
      border-radius: 15px;
      box-sizing: border-box;
      font-size: 13px;
      color: #959595;
    }

    .url2 {
      position: absolute;
      top: 5px;
      right: -5px;
      display: block;
      width: 35px;
      height: 30px;
      line-height: 250px;
      overflow: hidden;
      cursor: pointer;
      background-position: .50px .600px;
    }
  }

  .login {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;

  }
}

.md-header .login a {
  display: block;
  width: 30px;
  height: 30px;
  background-position: 0 -33px;
}

.md-nav {

  max-width: 500px;
  min-width: 375px;
  margin: 0 auto;
  padding: 0 .100px;
  position: fixed;
  top: 50px;
  width: 100%;
  height: 50px;
  line-height: .8rem;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
  z-index: 99;

  a {
    float: left;
    width: 25%;
    text-align: center;
    font-size: 16px;
    position: relative;
  }

  .cur {
    color: #333333;
    font-weight: bold;

    &::after {
      position: absolute;
      bottom: 0px;
      left: 50%;
      margin-left: -8.5px;
      width: 17px;
      height: 4px;
      line-height: 0;
      font-size: 0;
      background: #00cc7d;
      border-radius: 2px;
      content: "";
    }
  }
}
</style>